import React from 'react';
import { Avatar } from 'antd';
import cn from 'classnames';
import styles from './index.css';

export default function CommentItem({ avatar, name, tag, comment, ...rest }) {
    // const [state, setState] = React.useState();
    return (
        <div className={cn(styles.flexRow)} {...rest}>
            <Avatar size={24} className={cn(styles.flexNone)} src={avatar} />
            <div className={cn(styles.ml8, styles.flexColumn, styles.flexAuto)}>
                <div className={cn(styles.flexRow, styles.wrap)}>
                    <span>{name}</span>
                    {!!tag && <span className={styles.ml8}>{tag}</span>}
                </div>
                <div className={cn(styles.light, styles.mt8, styles.comment)}>{comment}</div>
            </div>
        </div>
    );
}
